<template>
  <div class="login">
    <div class="logo">
      <img src="./../../assets/icons/logo.png" alt="">
      <h1>高速管家</h1>
    </div>
    <div class="login_input">
      <van-form @submit="onSubmit" ref="ruleForm">
        <van-field
          left-icon="manager"
          v-model="loginForm.name"
          name="name"
          clearable
          placeholder="用户名"
          autofocus
        >
        </van-field>
        <van-field
          v-model="loginForm.pwd"
          :type="flag ===true ? 'password' : 'text'"
          name="pwd"
          clearable
          placeholder="密码"
          left-icon="lock"
          :right-icon="flag === true ? 'closed-eye': 'eye-o'"
          @click-right-icon="toggleType"
        />
          <van-checkbox  v-model="checked">记住密码</van-checkbox>
        <van-button block type="info" native-type="submit">
          提交
        </van-button>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loginForm: {
        name: '',
        pwd: '',
        loginpoint: ''
      },
      checked: true, // 复选框选中状态
      type: 'password',
      flag: true // 此时对应的密码是密文显示
    }
  },
  mounted () {
    // 记住密码功能实现
    this.getCookie() // 调取页面中的cookie
  },
  methods: {
    // 点击小眼睛,切换密码显示状态
    toggleType () {
      this.flag = !this.flag
    },
    // 点击登录按钮之后
    async onSubmit (value) {
      // {name: "1", pwd: ""}
      // console.log(value)
      // 记住密码功能实现
      // 1.首先判断是否是勾选状态,如果勾选则调用cookie方法
      const self = this
      if (self.checked === true) {
        self.setCookie(value.name, value.pwd, 15)
      } else {
        // 清空cookie
        self.clearCookie()
      }
      // 首先进行表单非空验证
      if (this.loginForm.name === '') {
        this.$toast('用户名不能为空')
        return
      }
      if (this.loginForm.pwd === '') {
        this.$toast('密码不能为空')
      } else {
        // 非空验证之后发送ajax请求
        const { data: res } = await this.$http.post('/api/fictitious/PostLogin', this.loginForm)
        console.log(res)
        // 验证错误的情况
        if (res.code !== '000000') {
          this.$toast('您输入的用户名或者密码错误')
          // 登录成功之后
        } else {
          this.$toast('登录成功')
          this.$router.push('/realtime', {
            query: res
          })
        }
      }
    },
    // 设置cookie
    setCookie (name, pwd, days) {
      const day = new Date() // 获取时间
      day.setTime(day.getTime() + 24 * 60 * 60 * 1000 * days) // 保存的天数
      // 字符串拼接cookie
      window.document.cookie = 'name' + '=' + name + ';path=/;expires=' + day.toGMTString()
      window.document.cookie = 'pwd' + '=' + pwd + ';path=/;expires=' + day.toGMTString()
    },
    // 读取cookie
    getCookie () {
      if (document.cookie.length > 0) {
        const arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下
        for (let i = 0; i < arr.length; i++) {
          const arr2 = arr[i].split('=') // 再次切割
          // 判断查找相对应的值
          if (arr2[0] === 'name') {
            this.$refs.ruleForm.name = arr2[1] // 保存到保存数据的地方
          } else if (arr2[0] === 'pwd') {
            this.$refs.ruleForm.pwd = arr2[1]
          }
        }
      }
    },
    // 清除cookie
    clearCookie: function () {
      this.setCookie('', '', -1) // 修改2值都为空，天数为负1天就好了
    }

  }
}
</script>

<style scoped lang="less">
  .login {
    text-align: center;

    .logo {
      width: 81px;
      margin: 50px auto 37.5px;

      img {
        width: 80px;
        height: 54px;
        margin-bottom: 12px;
      }

      h1 {
        font-size: 18px;
        font-weight: 600;
      }
    }

    .login_input {
      padding: 0 28px;

      .van-cell {
        border: 1px solid #ccc;
        margin-bottom: 20px;
        height: 40px;
        border-radius: 6px;
      }

      .van-checkbox{
        float: right;
        margin-bottom: 20px;
      }
    }
  }
</style>
